<template>
  <view class="container">
    <view class="bottom_view">
      <view class="view_tips">
        <view>确认签收及代表货物已完好无损交付，</view>
        <view>请您在上方“签名区域”处签名，并保持字迹清晰。</view>
      </view>
      <view class="btns_clear" @click="handleCancel">
        取消签名
      </view>
      <view class="btns_config" @click="handleSubmitSign">
        确认签收
      </view>
    </view>
    <view class="clear" @click="handleClearSign">
      清除重签
    </view>
    <view class="canvas_box">
      <view class="canvas_tips">
        签名区域
      </view>
      <canvas canvas-id="canvas_id" class="canvas_content" disable-scroll="true" @touchstart="touchStart"
        @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchEnd" @error="canvasIdErrorCallback"></canvas>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref, onMounted } from 'vue';
import Taro from "@tarojs/taro";
// screen_bottom: getApp().globalData.screenBottom + 'px',//这里缓存了手机底部栏高度
const beginDraw = ref(false) //开始绘画
const startX = ref(0)//屏幕点x坐标
const startY = ref(0)//屏幕点y坐标

let context

onMounted(() => {
  context = Taro.createCanvasContext('canvas_id')
  context.setLineWidth(4)//设置线宽
  context.setLineCap('round')//设置线末端样式
  context.setLineJoin('round')//设置线条的结束交点样式

})
function canvasIdErrorCallback() { }
//清除签名
function handleClearSign() {
  context.draw() //true 接着上次的继续画图，false 取消上次的画图 默认值
  context.setLineWidth(4)
  context.setLineCap('round')
  context.setLineJoin('round')
}

//提交签名
function handleSubmitSign() {
  if (startX.value == 0) {
    Taro.showToast({
      title: '请书写签名',
      icon: 'none'
    })
    return
  }
  Taro.canvasToTempFilePath({
    canvasId: 'canvas_id',
    success: (res) => {
      getImageInfo(res.tempFilePath)
    },
    fail: () => {
      Taro.showToast({
        title: '保存报错，请稍后重试',
        icon: 'none'
      })
    }
  })
}

//获取图片信息上传图片
function getImageInfo(signUrl) {
  // console.log(signUrl, '图片路径')
  Taro.navigateTo({
    url: `/pages2/signPage/index?signUrl=${signUrl}`
  });
}

//开始
function touchStart(e) {
  lineBegin(e.touches[0].x, e.touches[0].y)
}
// 移动
function touchMove(e) {
  if (beginDraw.value) {
    addPointInLine(e.touches[0].x, e.touches[0].y)
    context.draw(true) //true 本次绘制接着上一次绘制  false 清除上次绘制
  }
}
//结束
function touchEnd() {
  lineEnd()
}

//开始划线
function lineBegin(x, y) {
  beginDraw.value = true
  context.beginPath()
  startX.value = x;
  startY.value = y
  addPointInLine(x, y)
}
//增加点
function addPointInLine(x, y) {
  context.moveTo(startX.value, startY.value);
  context.lineTo(x, y);
  context.stroke() //划弧线
  startX.value = x
  startY.value = y
}
function lineEnd() {
  context.closePath() //关闭当前路径
  beginDraw.value = false
}

function handleCancel() {
  Taro.navigateBack()
}


</script>

<style lang="scss" >
// @import "xxx";
// @import url(xxx);

.container {
  background-color: #F6F7F8;
  height: calc(100vh - 32rpx);
  padding: 16rpx 30rpx;
}

.clear {
  width: 100rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  position: fixed;
  top: 10rpx;
  right: 30rpx;
  z-index: 999999;
  color: #fff;
  font-size: 14px;
  background: #006aff;
}

.canvas_box {
  width: 100%;
  height: calc(100% - 54px);
  background-color: #E8E9EC;
  position: relative;

  .canvas_tips {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 80px;
    color: #E2E2E2;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
  }

  .canvas_content {
    width: 100%;
    height: 100%;
  }
}

.bottom_view {
  width: 176rpx;
  margin-top: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .view_tips {
    color: #363A44;
    writing-mode: vertical-rl;
    font-size: 24rpx;
    text-align: center;
    margin: 0 auto;

    view {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }




  .btns_clear {
    color: #666666;
    border: 1rpx solid #C4C4C4;
    border-radius: 10px;
    width: 80rpx;
    height: 272rpx;
    font-size: 28rpx;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .btns_config {
    color: #ffffff;
    background-color: #006AFF;
    border-radius: 10px;
    width: 80rpx;
    height: 272rpx;
    font-size: 28rpx;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 20rpx;
  }
}
</style>
